<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">主动报工统计报表</h3>
    </div>
    <div class="panel-body">
        <!-- 筛选条件 -->
        <div class="row mb-3">
            <div class="col-md-3">
                <label>开始日期：</label>
                <input type="date" id="startDate" class="form-control" value="{:date('Y-m-01')}">
            </div>
            <div class="col-md-3">
                <label>结束日期：</label>
                <input type="date" id="endDate" class="form-control" value="{:date('Y-m-d')}">
            </div>
            <div class="col-md-2">
                <label>员工：</label>
                <select id="userId" class="form-control">
                    <option value="">全部员工</option>
                    {volist name="users" id="user"}
                    <option value="{$user.id}">{$user.nickname}</option>
                    {/volist}
                </select>
            </div>
            <div class="col-md-2">
                <label>状态：</label>
                <select id="status" class="form-control">
                    <option value="">全部状态</option>
                    <option value="0">待审核</option>
                    <option value="1">已通过</option>
                    <option value="2">已拒绝</option>
                </select>
            </div>
            <div class="col-md-2">
                <label>&nbsp;</label>
                <button type="button" id="searchBtn" class="btn btn-primary btn-block">
                    <i class="fa fa-search"></i> 查询
                </button>
            </div>
        </div>
        
        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="panel panel-info">
                    <div class="panel-body text-center">
                        <h3 id="totalReports">0</h3>
                        <p>总报工次数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-success">
                    <div class="panel-body text-center">
                        <h3 id="totalQuantity">0</h3>
                        <p>总生产数量</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-warning">
                    <div class="panel-body text-center">
                        <h3 id="totalWage">￥0.00</h3>
                        <p>总工资</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-danger">
                    <div class="panel-body text-center">
                        <h3 id="avgWage">￥0.00</h3>
                        <p>平均工资</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">按员工统计</h4>
                    </div>
                    <div class="panel-body">
                        <div id="userChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">按产品统计</h4>
                    </div>
                    <div class="panel-body">
                        <div id="productChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">按状态统计</h4>
                    </div>
                    <div class="panel-body">
                        <div id="statusChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">按日期统计</h4>
                    </div>
                    <div class="panel-body">
                        <div id="dateChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 详细数据表格 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">详细统计数据</h4>
                    </div>
                    <div class="panel-body">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#userTable" role="tab" data-toggle="tab">员工统计</a>
                            </li>
                            <li role="presentation">
                                <a href="#productTable" role="tab" data-toggle="tab">产品统计</a>
                            </li>
                            <li role="presentation">
                                <a href="#dateTable" role="tab" data-toggle="tab">日期统计</a>
                            </li>
                        </ul>
                        
                        <div class="tab-content">
                            <div class="tab-pane active" id="userTable">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>员工姓名</th>
                                            <th>报工次数</th>
                                            <th>生产数量</th>
                                            <th>总工资</th>
                                            <th>平均工资</th>
                                        </tr>
                                    </thead>
                                    <tbody id="userTableBody"></tbody>
                                </table>
                            </div>
                            
                            <div class="tab-pane" id="productTable">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>产品</th>
                                            <th>型号</th>
                                            <th>报工次数</th>
                                            <th>生产数量</th>
                                            <th>总工资</th>
                                        </tr>
                                    </thead>
                                    <tbody id="productTableBody"></tbody>
                                </table>
                            </div>
                            
                            <div class="tab-pane" id="dateTable">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>日期</th>
                                            <th>报工次数</th>
                                            <th>生产数量</th>
                                            <th>总工资</th>
                                        </tr>
                                    </thead>
                                    <tbody id="dateTableBody"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
require(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    var Controller = {
        statistics: function () {
            // 动态加载ECharts
            require(['https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'], function() {
                Controller.api.initStatistics();
            });
        },
        api: {
            initStatistics: function () {
                // 初始化图表
                var userChart = echarts.init(document.getElementById('userChart'));
                var productChart = echarts.init(document.getElementById('productChart'));
                var statusChart = echarts.init(document.getElementById('statusChart'));
                var dateChart = echarts.init(document.getElementById('dateChart'));
                
                // 查询按钮点击事件
                $('#searchBtn').on('click', function() {
                    loadStatistics();
                });
                
                // 页面加载时执行一次查询
                loadStatistics();
                
                // 窗口大小改变时重绘图表
                $(window).on('resize', function() {
                    userChart.resize();
                    productChart.resize();
                    statusChart.resize();
                    dateChart.resize();
                });
                
                function loadStatistics() {
                    var params = {
                        start_date: $('#startDate').val(),
                        end_date: $('#endDate').val(),
                        user_id: $('#userId').val(),
                        status: $('#status').val()
                    };
                    
                    $.ajax({
                        url: Fast.api.fixurl('scanwork/active_report/statistics'),
                        method: 'GET',
                        data: params,
                        success: function(response) {
                            if (response.code === 1) {
                                updateStatistics(response.data);
                            } else {
                                Toastr.error(response.msg || '获取统计数据失败');
                            }
                        },
                        error: function() {
                            Toastr.error('网络错误，请重试');
                        }
                    });
                }
                
                function updateStatistics(data) {
                    // 更新统计卡片
                    var totalReports = 0, totalQuantity = 0, totalWage = 0;
                    
                    data.user_stats.forEach(function(item) {
                        totalReports += parseInt(item.report_count);
                        totalQuantity += parseInt(item.total_quantity);
                        totalWage += parseFloat(item.total_wage);
                    });
                    
                    $('#totalReports').text(totalReports);
                    $('#totalQuantity').text(totalQuantity);
                    $('#totalWage').text('￥' + totalWage.toFixed(2));
                    $('#avgWage').text(totalReports > 0 ? '￥' + (totalWage / totalReports).toFixed(2) : '￥0.00');
                    
                    // 更新员工统计图表
                    var userChartData = data.user_stats.map(function(item) {
                        return {
                            name: item.user_name,
                            value: parseFloat(item.total_wage)
                        };
                    });
                    
                    userChart.setOption({
                        title: { text: '员工工资统计' },
                        tooltip: { trigger: 'item' },
                        series: [{
                            type: 'pie',
                            radius: '50%',
                            data: userChartData
                        }]
                    });
                    
                    // 更新产品统计图表
                    var productChartData = data.product_stats.map(function(item) {
                        return {
                            name: item.product_name + ' - ' + item.model_name,
                            value: parseInt(item.total_quantity)
                        };
                    });
                    
                    productChart.setOption({
                        title: { text: '产品生产数量统计' },
                        tooltip: { trigger: 'item' },
                        series: [{
                            type: 'pie',
                            radius: '50%',
                            data: productChartData
                        }]
                    });
                    
                    // 更新状态统计图表
                    var statusMap = {0: '待审核', 1: '已通过', 2: '已拒绝'};
                    var statusChartData = data.status_stats.map(function(item) {
                        return {
                            name: statusMap[item.status] || '未知',
                            value: parseInt(item.count)
                        };
                    });
                    
                    statusChart.setOption({
                        title: { text: '状态分布统计' },
                        tooltip: { trigger: 'item' },
                        series: [{
                            type: 'pie',
                            radius: '50%',
                            data: statusChartData
                        }]
                    });
                    
                    // 更新日期统计图表
                    var dateLabels = data.date_stats.map(function(item) { return item.work_date; });
                    var dateValues = data.date_stats.map(function(item) { return parseInt(item.report_count); });
                    
                    dateChart.setOption({
                        title: { text: '每日报工次数统计' },
                        tooltip: { trigger: 'axis' },
                        xAxis: { type: 'category', data: dateLabels },
                        yAxis: { type: 'value' },
                        series: [{
                            type: 'line',
                            data: dateValues,
                            smooth: true
                        }]
                    });
                    
                    // 更新详细数据表格
                    updateDetailTables(data);
                }
                
                function updateDetailTables(data) {
                    // 更新用户统计表格
                    var userTableHtml = '';
                    data.user_stats.forEach(function(item) {
                        userTableHtml += '<tr>';
                        userTableHtml += '<td>' + item.user_name + '</td>';
                        userTableHtml += '<td>' + item.report_count + '</td>';
                        userTableHtml += '<td>' + item.total_quantity + '</td>';
                        userTableHtml += '<td>￥' + parseFloat(item.total_wage).toFixed(2) + '</td>';
                        userTableHtml += '<td>￥' + (parseFloat(item.total_wage) / parseInt(item.report_count)).toFixed(2) + '</td>';
                        userTableHtml += '</tr>';
                    });
                    $('#userTableBody').html(userTableHtml);
                    
                    // 更新产品统计表格
                    var productTableHtml = '';
                    data.product_stats.forEach(function(item) {
                        productTableHtml += '<tr>';
                        productTableHtml += '<td>' + item.product_name + '</td>';
                        productTableHtml += '<td>' + item.model_name + '</td>';
                        productTableHtml += '<td>' + item.report_count + '</td>';
                        productTableHtml += '<td>' + item.total_quantity + '</td>';
                        productTableHtml += '<td>￥' + parseFloat(item.total_wage).toFixed(2) + '</td>';
                        productTableHtml += '</tr>';
                    });
                    $('#productTableBody').html(productTableHtml);
                    
                    // 更新日期统计表格
                    var dateTableHtml = '';
                    data.date_stats.forEach(function(item) {
                        dateTableHtml += '<tr>';
                        dateTableHtml += '<td>' + item.work_date + '</td>';
                        dateTableHtml += '<td>' + item.report_count + '</td>';
                        dateTableHtml += '<td>' + item.total_quantity + '</td>';
                        dateTableHtml += '<td>￥' + parseFloat(item.total_wage).toFixed(2) + '</td>';
                        dateTableHtml += '</tr>';
                    });
                    $('#dateTableBody').html(dateTableHtml);
                }
            }
        }
    };
    
    // 初始化统计页面
    Controller.statistics();
});
</script> 